<template>
	<view class="content">
		<view class="index-page">
			<view class="search-box">
				<image class="search-img" @click="toSearchPage()"
					src="http://localhost:3000/images/%E6%90%9C%E7%B4%A2.png"></image>
				<input class="search" placeholder="请输入您要搜索的商品" />
			</view>
			<image class="ad-img" mode="aspectFill" src="http://localhost:3000/images/zhiyin-rendererd.png"></image>
			<view class="item">
				<view class="head">
					<image class="q-star" src="http://localhost:3000/images/q-star.png"></image>
					<image class="q-star" src="http://localhost:3000/images/q-star.png"></image>
					<image class="q-star" src="http://localhost:3000/images/q-star.png"></image>
					<view class="text">专属推荐 科技奢宠</view>
					<image class="q-star" src="http://localhost:3000/images/q-star.png"></image>
					<image class="q-star" src="http://localhost:3000/images/q-star.png"></image>
					<image class="q-star" src="http://localhost:3000/images/q-star.png"></image>
				</view>
				<view class="item-box">
					<image class="item-box-img" mode="aspectFill"
						src="http://localhost:3000/images/zhiyin-rendererd.png"></image>
					<view class="item-box-title">细胞级焕颜 两周焕活肌肤</view>
					<image class="item-box-division-line" mode="aspectFill" src="http://localhost:3000/images/分割线.png">
					</image>
					<view class="item-box-specifications">(SWISSE PLUS NAD+焕活瓶 套装)</view>
					<view class="btn">
						<view class="price"><text>尊享价:</text><text>￥</text><text>9999</text></view>
						<view class="buy"><text>立即购买</text></view>
					</view>
				</view>
				<view class="hr" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		onLoad() {

		},
		methods: {
			toSearchPage() {
				uni.navigateTo({
					url: "/pages/search/search"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {}

	.index-page {
		.search-box {
			background-color: #e9e9e9;
			padding: 40rpx 60rpx;
			display: flex;

			.search-img {
				height: 40rpx;
				width:50rpx;
				padding: 20rpx 30rpx;
				background-color: #ffffff;
				border-radius: 50rpx 0 0 50rpx;
			}

			.search {
				padding-right: 30rpx;
				padding-top: 10rpx;
				padding-bottom: 10rpx;
				width: 100%;
				height: 60rpx;
				background-color: #ffffff;
				border-radius: 0 50rpx 50rpx 0;
			}
		}

		.ad-img {
			width: 100%;
			height: 450rpx;
			vertical-align: middle;
		}

		.item {
			width: 100%;
			height: auto;
			background-color: rgba(33, 21, 21, 1);
			// background: linear-gradient(10deg,rgba(33, 21, 21,1) 10%,rgba(42,25,25,1) 60%,rgba(33, 21, 21,1) 90%);

			.q-star {
				width: 35rpx;
				height: 35rpx;
				padding: 5rpx;
				position: relative;
			}

			.q-star:nth-of-type(1)::after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: linear-gradient(to left, rgba(33, 21, 21, 0.6) 0%, rgba(33, 21, 21, 0.9) 60%);
				/* 你可以根据需要调整这个渐变 */
				z-index: 1;
			}

			.q-star:nth-of-type(2)::after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: linear-gradient(to left, rgba(33, 21, 21, 0.2) 0%, rgba(33, 21, 21, 1) 90%);
				/* 你可以根据需要调整这个渐变 */
				z-index: 1;
			}

			.q-star:nth-of-type(3)::after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: linear-gradient(to left, rgba(33, 21, 21, 0) 0%, rgba(33, 21, 21, 0.6) 90%);
				/* 你可以根据需要调整这个渐变 */
				z-index: 1;
			}

			.q-star:nth-of-type(4)::after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: linear-gradient(to right, rgba(33, 21, 21, 0) 0%, rgba(33, 21, 21, 0.6) 90%);
				/* 你可以根据需要调整这个渐变 */
				z-index: 1;
			}

			.q-star:nth-of-type(5)::after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: linear-gradient(to right, rgba(33, 21, 21, 0.2) 0%, rgba(33, 21, 21, 1) 90%);
				/* 你可以根据需要调整这个渐变 */
				z-index: 1;
			}

			.q-star:nth-of-type(6)::after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: linear-gradient(to right, rgba(33, 21, 21, 0.6) 0%, rgba(33, 21, 21, 0.9) 60%);
				/* 你可以根据需要调整这个渐变 */
				z-index: 1;
			}

			.text {
				color: #d3b588;
				padding: 0 20rpx;
				font-size: 40rpx;
				line-height: 1;
				margin-bottom: 8rpx;
				transform: scaleY(1.4);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				background-image: linear-gradient(60deg, rgba(207, 175, 149, 1.0) 30%, rgba(252, 239, 229, 1.0) 40%, rgba(252, 239, 229, 1.0) 65%, rgba(207, 175, 149, 1.0) 75%);
			}

			.head {
				height: 120rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.item-box {
				margin: auto;
				background-color: #32221b;
				background: linear-gradient(10deg, rgba(33, 21, 21, 1) 0%, rgba(42, 25, 25, 1) 40%, rgba(61, 38, 38, 1.0) 100%);
				width: 650rpx;
				// height: 600rpx;
				border-radius: 20rpx;
				border-top: #d3b588 solid 2rpx;
				text-align: center;
				box-shadow: 0 -2rpx 5rpx 2rpx #513131;

				.item-box-img {
					margin-top: 30rpx;
					width: 600rpx;
					height: 360rpx;
					border-radius: 15rpx;
				}

				.item-box-title {
					padding-top: 20rpx;
					font-size: 35rpx;
					transform: scaleY(1.3);
					color: #d5c07e;
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					background-image: linear-gradient(55deg, rgba(213, 192, 126, 1.0) 30%, rgba(252, 239, 229, 1.0) 45%, rgba(252, 239, 229, 1.0) 55%, rgba(213, 192, 126, 1.0) 75%);
				}

				.item-box-division-line {
					width: 260rpx;
					height: 15rpx;
				}

				.item-box-specifications {
					font-size: 25rpx;
					color: #e4ddc6;
				}

				.btn {
					margin-bottom: 20rpx;
					display: flex;
					justify-content: space-between;

					.price {
						margin: 20rpx 0;
						width: 330rpx;
						height: 80rpx;
						text-align: center;
						background-color: #3B3B3B;
						line-height: 80rpx;
						transform: translateX(-20rpx);
						border-radius: 10rpx 0 0 10rpx;
						z-index: 1;
					}

					.price text:nth-of-type(1) {
						color: #e4ddc6;
						font-size: 26rpx;
						font-weight: 600;
					}

					.price text:nth-of-type(2) {
						color: #e4ddc6;
						font-size: 26rpx;
						font-weight: 600;
						padding: 0 10rpx;
					}

					.price text:nth-of-type(3) {
						color: #f3ecd4;
						font-size: 45rpx;
						font-weight: 600;
					}

					.price::before {
						content: "";
						position: absolute;
						right: 0;
						transform: translateX(100%);
						border: 40rpx solid;
						border-color: transparent transparent transparent #3B3B3B;
					}

					.buy {
						margin: 20rpx 0;
						color: #513131;
						width: 330rpx;
						height: 80rpx;
						text-align: center;
						background-image: linear-gradient(45deg, #d3b588 20%, #ede3ac, #d3b588);
						line-height: 80rpx;
						transform: translateX(20rpx);
						border-radius: 0 10rpx 10rpx 0;
					}

					.buy::after {
						content: "";
						position: absolute;
						left: 0;
						transform: translateX(-100%);
						border: 40rpx solid;
						border-color: transparent #d3b588 transparent transparent;
					}
				}
			}

			.hr {
				border-top: 1rpx solid white;
				margin-top: 26rpx;
			}
		}
	}
</style>